<ion-header>
  <ion-navbar color="twitter">
      <img src={{picture}} class="img" menuToggle>
      <ion-title class="biaoti">悦头条</ion-title>
      <ion-icon class="icon" name="search" (click)="enterPage()"></ion-icon>
  </ion-navbar>
  <!-- pageNumber：当前屏幕可以显示的类型数目  -->
  <!-- <my-slide (slideClick)="onSlideClick($event)" [slides]="pageSlides" [pageNumber]="5" [selectedIndex]='pageIndex'></my-slide> -->
  <ion-slides class="slide-title" #menuSlides [slidesPerView]="5"  [pager]="false"> 
    <ion-slide *ngFor="let slide of pageSlides; let i = index;">
      <div (click)="onSlideClick(i)">
          <span class="slide-title-unit" [ngClass]="{'slide-title-active': pageIndex == i}">{{slide}}</span>
      </div>
    </ion-slide>
  </ion-slides>
</ion-header>
<!-- 
  <ion-content padding>  是否在内容上添加内填充。在iOS上默认为true，在Android上为false。
-->
<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content refreshingSpinner="circles" refreshingText="推荐中" pullingIcon="none" refreshingText="Refreshing..."></ion-refresher-content>
  </ion-refresher>
  <ion-slides class="slide-content" #contentSlides (ionSlideDidChange)="slideChanged()" style="height:auto"> 
    <ion-slide *ngFor="let slide of pageSlides">
        <!-- style="padding-right:15px" -->
        <ion-list style="padding-right:15px;">  
            <!-- padding='false' -->
          <ion-item *ngFor="let item of temphHomeArticles" (click)="showArticles($event, item.url)"> 
            <div *ngIf="item.type == 1">
              <div class="list-left" style="float:left; width:65%;">
                <div class="list-title">{{item.title}}</div>
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div>
              </div>
              <div class="list-picture"><img src="{{item.picture}}" alt=""></div>
            </div>
            <div *ngIf="item.type == 2">
                <div class="list-title">{{item.title}}</div>
                <div class="list-picture2">
                  <img src="{{item.picture}}" alt="">
                  <img src="{{item.picture}}" alt="">
                  <img src="{{item.picture}}" alt="">
                </div>
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                    <!-- <div class="list-picture"><img src="{{item.picture3}}" alt=""></div> -->
                </div>
            </div>
          </ion-item>
        </ion-list>
    </ion-slide>
  </ion-slides>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" immediate-check="false">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="正在加载更多数据">
      </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

